<template>
	<view>
		<text v-if="value.length > 0" style="margin-left: 20px;width: 100%;">
			{{ value.join('/') }}
		</text>
		<piaoyi-cityPicker :column="3" :visible="visible" :mask-close-able="true" @confirm="confirm"
			@cancel="closePicker" />
	</view>
</template>

<script>
	export default {
		props: {
			// 窗口外部开关
			visible: {
				type: Boolean,
				default: false
			},
			// 创建、修改时的数据
			value: {
				type: [Array, String],
				default: () => []
			},
		},
		methods: {
			/**
			 * @example 关闭选择器,必须要异步
			 */
			closePicker() {
				setTimeout(() => {
					this.$emit('update:visible', false)
				}, 0)
			},
			/**
			 * @example 修改地址信息
			 */
			confirm(e) {
				console.log('选择的地址是', e);
				// {
				//     "code": "220102",
				//     "name": "吉林省长春市南关区",
				//     "provinceName": "吉林省",
				//     "cityName": "长春市",
				//     "areaName": "南关区"
				// }
				const { provinceName, cityName, areaName } = e
				this.$emit('confirm', [provinceName, cityName, areaName])
				this.$emit('input', [provinceName, cityName, areaName])
				this.closePicker()
			},
		},
	}
</script>

<style>
</style>